@import 'variables';
.wrap
{
display: grid;
grid-template-columns: 2fr  1fr 2fr;
position: relative;
background-color: $primary-color;

&:hover{
  .img_bg_left{
    background-color: rgba(0,0,0,.1);
    left: 0;
    transition: all .5s ease-in-out;
    }
    
    .img_bg_right{
   
    background-color: rgba(0,0,0,.1);
    right: 0;
    transition: all .5s ease-in-out;
    }
}

}
.img_bg
{
  &_left
  { top: 50%;
    height: 108px;
    width: 72px;
    position: relative;
    left: -100%;
    display: flex;
    transition: all .5s ease-in-out;
    justify-content: center;
    align-items: center;
    &:hover{
      background: linear-gradient(to left, rgba(0,0,0,.05), rgba(0,0,0,.1));
    }
  }

 &_right
 {
  top: 50%;
  height: 108px;
  width: 72px;
  position: relative;
  right: -100%;
  display: flex;
  transition: all .5s ease-in-out;
  justify-content: center;
  align-items: center;
    &:hover
  {
      background: linear-gradient(to right, rgba(0,0,0,.05), rgba(0,0,0,.1));
  }
 }
 
}

.prev_action
{
display: flex;
justify-content: flex-start;
background-color: $primary-color;
border: none;

.pre_img{
width: 20px;
height: 39px;
z-index: 2;

}
}

.next_action{
display: flex;
justify-content: flex-end;
background-color: $primary-color;
border: none;
.next_img{

  width: 20px;
  height:39px;
  z-index: 2;
 

}
}